<script setup lang="ts">
import * as UserApi from '@/api/system/user/index';

const userId = defineModel("userId");
const deptId = defineModel("deptId");
const deptName = defineModel("deptName");

const props = defineProps({
    multiple: {
        type: Boolean,
        default: false
    }
})

const options = ref([]); //用户选项

const getSimpleUserList = async () => {
  const data = await UserApi.getSimpleUserList();
  options.value = data;
};
const handleChange = (value) => {
  if (props.multiple) {
    deptId.value = [];
    deptName.value = [];
  } else {
    options.value.forEach((item) => {
        if (item.id == value) {
            deptId.value = item.deptId;
            deptName.value = item.deptName;
        }
    })
  }
}

getSimpleUserList(); //获取用户数据
</script>

<template>
  <!-- 用户选择 -->
  <el-select v-model="userId" :multiple="props.multiple" filterable placeholder="请选择用户" @change="handleChange">
    <el-option v-for="item in options" :key="item.id" :label="item.nickname" :value="item.id" >
      <span style="float: left">{{ item.nickname }}</span>
      <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;" >
        {{ item.deptName }}
      </span>
    </el-option>
  </el-select>
</template>

<style scoped lang="scss">
.content {
  overflow: hidden;
}
</style>
